<template>
  <div id="waveinventoryallocate" v-loading="loading">
    <v-tableTitle :title="$t('wave.waveinventoryallot')"></v-tableTitle>
    <div class="detail">
      <v-navMenu
        :detailNav="detailNav"
        :menuData="menuData"
        @setMentActive="setMentActive"
      ></v-navMenu>
      <component
        :inputData="{ detailData, detailDataFpkw }"
        :is="currentComponent"
      ></component>
    </div>
  </div>
</template>

<script>
import navMenu from "commons/NavMenu";
import baseMixin from "@/mixins/BaseMixin";
import tableTitle from "commons/TableTitle";

export default {
  name: "waveinventoryallocate",
  mixins: [baseMixin],
  data() {
    return {
      selectData: {},
      detailData: {},
      detailDataFpkw: {},
      menuData: [
        { label: this.$t("wave.noallocate"), index: "1" },
        { label: this.$t("wave.partallocate"), index: "2" },
        { label: this.$t("wave.allocated"), index: "3" },
      ],
      detailNav: "1",
      componentConfig: [
        {
          name: "noallocate",
          label: this.$t("wave.noallocate"),
          component: () => import("./detail/noallocate.vue"),
        },
        {
          name: "partallocate",
          label: this.$t("wave.partallocate"),
          component: () => import("./detail/partallocate.vue"),
        },
        {
          name: "allocate",
          label: this.$t("wave.allocated"),
          component: () => import("./detail/allocate.vue"),
        },
      ],
      deleteStatus: true,
    };
  },
  computed: {
    currentComponent() {
      return this.componentConfig[this.detailNav - 1].component;
    },
  },
  methods: {
    setMentActive(key) {
      this.detailNav = key;
    },
  },
  mounted() {
    if (Object.keys(this.$store.state.skip).length !== 0) {
      let data = this.$store.state.skip;
      this.detailData = data.detail;
      this.selectData = data.routeData;
      this.detailNav = data.detailNav;
    } else {
      this.selectData = this.$store.state.routeData;
    }
  },
  watch: {},
  components: {
    "v-navMenu": navMenu,
    "v-tableTitle": tableTitle,
  },
};
</script>

<style scoped>
#waveinventoryallocate {
  width: 100%;
  height: 99%;
  padding-top: 6px;
}
</style>
